<template>
	<view>
		<sb-back-icon />
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs active-color="#080808" ref="tabs" :list="list" :current="swiperCurrent" @change="change">
				</u-tabs>
			</view>

			<!-- <view class="page-box">
				<view class="order shadow-line">
					<view v-for="(item, index) in orderList" :key="index">
						<view class="item j-s">
							<view class="left">
								<image :src="item.sku.goods.cover" mode="aspectFill"></image>
							</view>
							<view class="flex1 flex j-s">
								<view class="content">
									<view class="title u-line-2">{{
                          item.sku.goods.name
                        }}</view>
									<view class="type">{{ item.skuDesc }}</view>
									<view class="delivery-time">发货时间 {{ item.deliveryTime }}
									</view> 
								</view>
								<view class="right">
									<view class="price">
										￥{{ item.sku.salePrice }}
										<text class="decimal">.{{ priceDecimal(item.price) }}</text>
									</view>
									<view class="number">x{{ item.count }}</view>
								</view>
							</view>
						</view>

						<u-line v-if="orderList.length > 1" />
					</view>
					<view class="total">
						共{{ totalNum(orderList) }}件商品 合计:
						<text class="total-price">
							￥{{ priceInt(totalPrice(orderList)) }}.
							<text class="decimal">{{
                      priceDecimal(totalPrice(orderList))
                    }}</text>
						</text>
					</view>
					<view class="bottom flex j-end">
						<view v-if="res.status <= 1" class="evaluate btn padh10">
							{{ res.status === 1 ? "追加" : "上传" }}支付凭证
						</view>
						<view @click.native.stop="confirmGooods(res)" v-if="res.status === 3"
							class="evaluate btn padh10">确认收货</view>
					</view>
				</view>

				<u-loadmore
                :status="loadStatus[0]"
                bgColor="#f2f2f2"
              ></u-loadmore> 
			</view> -->
			<u-modal ref="confirmModal" :title="null" confirm-text="Yes" show-cancel-button cancel-text="No"
				v-model="modalShow" @confirm="finishOrder" @cancel="modalShow = false"
				content="Have you confirmed receipt of the goods?"></u-modal>
		</view>
	</view>
</template>

<script>
	import { ORDER_STATUS } from "@/config/enum.js";
	import { mapMutations } from "vuex";
	export default {
		data() {
			return {
				orderList: [
					[],
					[],
					[],
					[],
					[],
					[]
				],
				list: [{
						name: "All",
					},
					{
						name: "UnPaid",
					},
					{
						name: "Checking",
					},
					{
						name: "UnDelivery",
					},
					{
						name: "UnRecived",
					},
					{
						name: "Finished",
					},
				],
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: "loadmore",
				loadText: {
					loading: "努力加载中",
					nomore: "已经到底啦~",
				},
				params: {
					status: 0,
					pageIndex: 1,
					pageSize: 10,
				},
				modalShow: false,
				currentOrder: {},
			};
		},
		onLoad({ current }) {
			if (!this.$checkLogin()) return this.$redirect2Login();
			if (current) this.swiperCurrent = current;
			this.getOrderList(current);
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.params.pageIndex = 1;
			this.getOrderList(this.swiperCurrent);
		},
		//上拉触底，加载下一页
		onReachBottom() {
			this.params.pageIndex += 10;
			this.getOrderList(this.swiperCurrent);
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return (val) => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return "00";
				};
			},
			// 价格整数
			priceInt() {
				return (val) => {
					if (val !== parseInt(val)) return val.split(".")[0];
					else return val;
				};
			},
		},
		methods: {
			...mapMutations(["SET_ORDER_DETAILINFO"]),
			reachBottom(item) {
				if (item.length < 10) {
					this.loadStatus = "nomore";
					return;
				}
				this.params.pageIndex += 10;
				this.getOrderList(this.swiperCurrent, item);
			},
			async getOrderList(index, originalData = []) {
				this.params.status = index && index > 0 ? index - 1 : null;
				let { success, data } = await this.$get("/order/list", this.params);
				if (success) {
					this.orderList = data.rows
				}
			},
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map((val) => {
					price += parseFloat(val.sku.salePrice) * val.count;
				});
				return price.toFixed(2);
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map((val) => {
					num += val.count;
				});
				return num;
			},
			// tab栏切换
			change(index) {
				console.log(index);
				this.swiperCurrent = index;
				this.params.pageIndex = 1;
				this.getOrderList(index);
			},
			toDetailInfo(info) {
				this.SET_ORDER_DETAILINFO(info);
				this.$go2(`./order-info?id=${info.id}`);
			},
			switchTab() {
				uni.switchTab({
					url: "/pages/main/tabbar/category/category",
				});
			},
			confirmGooods(item) {
				console.log(item);
				this.currentOrder = item;
				this.modalShow = true;
			},
			async finishOrder() {
				try {
					let { success } = await this.$postB("/order/update-field", {
						id: this.currentOrder.id,
						key: "status",
						val: 4,
					});
					if (success) {
						this.$msg("Success");
						this.swiperCurrent = 5;
						this.getOrderList(this.swiperCurrent);
					}
				} catch (e) {
					this.$msg("Failed");
				}
			},
		},
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: #c33;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 26rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				color: red;
				font-size: 32rpx;
			}
		}

		.bottom {
			margin-top: 40rpx;
			padding: 0 10rpx;

			.btn {
				line-height: 52rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: #c33;
			}

			.evaluate {
				color: #c33;
				border-color: #c33;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			padding: 0 50rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: $main-color;
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
